<template>
	<view @touchstart="touchStart" @touchend="touchEnd" class="count">
		<image src="/static/qidongye.png" class="img" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				touchStartX: 0, // 触屏起始点x  
				touchStartY: 0, // 触屏起始点y  

			}
		},
		onShow() {
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/home/index'
				})
			}, 2500)
		},
		methods: {
			/**  
			 * 触摸开始  
			 **/
			touchStart(e) {
				console.log("触摸开始")
				this.touchStartX = e.touches[0].clientX;
				this.touchStartY = e.touches[0].clientY;
			},

			/**  
			 * 触摸结束  
			 **/
			touchEnd(e) {
				console.log("触摸结束")
				let deltaX = e.changedTouches[0].clientX - this.touchStartX;
				let deltaY = e.changedTouches[0].clientY - this.touchStartY;
				if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
					if (deltaX >= 0) {
						console.log("左滑")
					} else {
						console.log("右滑")
						uni.switchTab({
							url: '/pages/home/index'
						})
					}
				} else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
					if (deltaY < 0) {
						console.log("上滑")
					} else {
						console.log("下滑")
					}
				} else {
					console.log("可能是误触！")
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.count {
		width: 100%;
		height: 100vh;
		position: relative;

		.img {
			width: 60%;
			height: 210rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			object-fit: cover;
		}
	}
</style>